<template>
	<view>
		<!-- 步骤条 -->
		<view class="step">
			<uni-steps :options="option" :active="3" active-color="#00C6C2"></uni-steps> 
		</view>
		<!-- 代理商码： -->
		<view class="code">
			<view class="code_text1">
				<text>代理商码:</text>
				<text style="font-weight: 500;color: #979797;font-size: 28rpx;margin-left: 30rpx;">正在生成中</text>
			</view>
			<!-- //专属链接 -->
			<view class="exclusive">
				<view>
					专属链接:<text style="font-weight: 500;color: #979797;font-size: 28rpx;margin-left: 30rpx;">www.we egdcdic d.conj </text>
				</view>
				<view class="share">
					<text>推广分享</text>
				</view>
				
			</view>
			
		</view>
		<!-- //完成 -->
		<view class="confirm">
			<view class="confirm_text1">
				<view class="scrie">
					<text class="icon iconfont">&#xe7aa;</text>
				</view>
				<view>已完成-技术服务费 </view>
			</view>
			<view class="confirm_text2">
				您已完成入驻、支付并签订代理合作协议。
			</view>
			<view style=" height: 3rpx; background-color: #EEEEEE;"></view>
			<!-- 进行中 -->
			<view class="spe">
				<view class="scre1"></view>
				<view>进行中 -新增用户</view>
			</view>
			<view class="time">
				<text>
					还剩83天
				</text>
			</view>
			<!-- //进度条 -->
			<view class="tps">
				<u-slider v-model="value" height='15' min="0" max="99" active-color="#00C6C2" disabled='false'>
					<view class="">
									<view style="transform: translateY(-25rpx);font-size: 28rpx;font-family: PingFang;font-weight: bold;color: #282828;">{{value}}人</view>
									<view class="badge-button">
										达成
									</view>
									
								</view>
				</u-slider>
				
			</view>
			<view style="width: 100%;display: flex;flex-wrap: wrap;justify-content: space-between;font-size: 26rpx;font-family: PingFang;font-weight: 500;color: #707070;margin-top: 10rpx;">
				<view>0人</view>
				<view>99人</view>
			</view>
			
		</view>
		<!-- 即将完成 -->
		<view style="padding: 74rpx 26rpx;">
			<view class="comf">即将完成</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				option:[{title:'身份认证'},{title:'结算信息'},{title:'完成支付'},{title:'进度查看'}],
				value:60
			}
		}
	}
</script>
<style>
	page{
		background-color: #EEEEEE;
	}
</style>
<style scoped lang="less">
	//步骤
	.step{
		padding: 47rpx 25rpx;
		background-color: white;
		margin-bottom: 14rpx;
	}
	//代理商码
	.code{
		padding: 43rpx 22rpx;
		margin-top: 15rpx;
		background-color: white;
		.code_text1{
			padding-bottom: 45rpx;
			border-bottom: 1rpx solid #EEEEEE;
			
			font-size: 32rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #000000;
			line-height: 30rpx;
		}
		.exclusive{
			padding-top: 40rpx;
			font-size: 32rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #000000;
			line-height: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.share{
				padding: 13rpx 19rpx;
				background: #00C6C2;
				border-radius: 25rpx;
				text-align: center;				
				font-size: 24rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 30rpx;
				text{
					opacity: 0.8;
				}
			}
		}
	}
//完成
.confirm{
	background: white;
	padding: 53rpx 32rpx;
	margin-top: 15rpx;
	.confirm_text1{
		display: flex;
		font-size: 32rpx;
		font-family: PingFang;
		font-weight: bold;
		color: #282828;
		line-height: 30rpx;
		.scrie{
			width: 30rpx;
			height: 30rpx;
			background: #1EBBBD;
			border-radius: 50%;
			margin-right: 26rpx;
			text-align: center;
			margin-bottom: 20rpx;
			.iconfont{
				font-size: 22rpx;
				font-weight: bold;
				color: white;
			}
		}
	}
	.confirm_text2{
		margin-left: 60rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #8A8A8A;
		line-height: 30rpx;
	
		padding-bottom: 49rpx;
	}
	.spe{
		margin-top: 49rpx;
		display: flex;
		font-size: 32rpx;
		font-family: PingFang;
		font-weight: bold;
		color: #282828;
		line-height: 30rpx;
		.scre1{
			width: 30rpx;
			height: 30rpx;
			background: #FFFFFF;
			border-radius: 50%;
			border: 2rpx solid #1EBBBD;
			margin-right: 26rpx;
		}
	}
	.time{
		width: 134rpx;
		height: 54rpx;
		background: #00C6C2;
		text-align: center;
		line-height: 54rpx;
		margin-top: 34rpx;		
		font-size: 24rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #FFFFFF;
		text{
			opacity: 0.8;
		}
	}
	.tps{
		margin-top: 85rpx;
	}
	
}
	.wrap {
		padding: 30rpx;
	}
	
	.badge-button {
		width: 45rpx;
		height: 45rpx;
		background: white;
		color: #000000;
		border-radius:50%;
		font-size: 22rpx;
		line-height: 45rpx;
		text-align: center;
		transform: translateY(-20rpx);		
		border: 1rpx solid #CBCBCB;
		box-shadow: 0px 2rpx 4rpx 0px rgba(49, 124, 149, 0.63);
	}
	//即将完成
	.comf{
		background: #00C6C2;
		
		height: 94rpx;
		background: #00C6C2;
		border: 1px solid #00C6C2;
		border-radius: 4rpx 4rpx 4rpx 0px;
		text-align: center;
		line-height: 94rpx;
		font-size: 36rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #FFFFFF;
	}
	
</style>
